<template>
  <div>
    <el-dialog
      :close-on-click-modal="false"
      :beforeClose="handleClose"
      title="发布工单"
      :visible.sync="dialogVisible"
      width="500px">
      <el-form :model="form" size="mini" label-width="100px"  ref="form" :rules="rules">
         <el-form-item label="客户名称：" style="margin-bottom: 5px">
              {{customerName}}
         </el-form-item>
         <el-form-item label="销售员：" style="margin-bottom: 5px">
           {{userName}}
         </el-form-item>
        <el-row>
          <el-col :span="12">
            <el-form-item label="开始时间：" prop="startDate">
              <el-date-picker
                @change="form.endDate = ''"
                style="width:130px;"
              value-format="yyyy-MM-dd"
              v-model="form.startDate"
              type="date"
              placeholder="选择日期">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="结束时间：" prop="endDate">
              <el-date-picker
                style="width:130px;"
                :picker-options="pickerOptions"
                value-format="yyyy-MM-dd"
                v-model="form.endDate"
                type="date"
                placeholder="选择日期">
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>

        <el-form-item label="是否反馈" prop="isNeedReply">
            <el-radio-group v-model="form.isNeedReply">
              <el-radio :label="1">是</el-radio>
              <el-radio :label="0">否</el-radio>
            </el-radio-group>
        </el-form-item>

        <el-form-item label="工单内容" prop="woContent">
          <el-input :autosize="{ minRows: 2, maxRows: 6}" type="textarea" v-model.trim="form.woContent"></el-input>
        </el-form-item>

      </el-form>
      <span slot="footer" class="dialog-footer">
            <el-button @click="handleClose">取 消</el-button>
            <el-button type="primary" @click="handleConfirm" :loading="btnLoading">确 定</el-button>
        </span>
    </el-dialog>
  </div>
</template>
<script>
import "@/utils/jQuery.print"
import {addWorkOrder} from "@/api/fms"
import {formatDate} from '@/utils/date';
const defaultForm={
  "customerId" : '',
  "woContent" : "",
  "startDate" : "",
  "endDate" : "",
  isNeedReply:'',
  trackingId:'',
  woSource:'',
  orderId:'',
}

export default {
  name: "addWorkOrder",
  data(){
    return {
      btnLoading:false,
      dialogVisible:false,
      form:JSON.parse(JSON.stringify(defaultForm)),
      rules:{
        isNeedReply:[{required: true, trigger: 'change' ,message: '请选择',}],
        woContent:[{required: true, trigger: 'blur' ,message: '此项必填',}],
        startDate:[{required: true, trigger: 'change' ,message: '请选择',}],
        endDate:[{required: true, trigger: 'change' ,message: '请选择',}]
      },
      customerName:'',
      userName:'',
    }
  },

  filters:{

  },

  created() {

  },
  computed: {
    pickerOptions() {
      return {
        disabledDate: (time) => {
          if (this.form.startDate) {
            return time.getTime() < new Date(this.form.startDate).getTime() - 86400000
          }
          return time.getTime() < Date.now() - 86400000
        }
      }
    },
  },

  methods:{

    showPop(type,id,customerName,userName,orderId){
      this.customerName = customerName;
      this.userName = userName
      this.form = JSON.parse(JSON.stringify(defaultForm))
      this.form.startDate = formatDate(new Date(), 'yyyy-MM-dd')
      this.form.woSource = type
      if(type == 'customerId' || type == 'customerList'){
        this.form.customerId = id;
      }else if(type == 'trackingId'){
        this.form.trackingId = id
      }else if(type == 'customerNeedPay'){
        this.form.orderId = id
      }
      this.dialogVisible = true;
    },
    handleClose(){
      this.dialogVisible = false;
    },
    handleConfirm(){
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.btnLoading = true;
          let data = JSON.parse(JSON.stringify(this.form));
          addWorkOrder(data).then(response => {
            this.btnLoading = false;
            this.$message({
              message: '提交成功',
              type: 'success',
              duration: 1000
            });
            this.handleClose();
          }).catch(() => {
            this.btnLoading = false;
          })
        }
      })
    },
  },
}
</script>


